<template>
  <div class="loginBox">
    <div class="headBox">
      <img src="../assets/img/bgimgright12x.png" alt />
      <div class="headContent flex_sb">
        <router-link to class="leftBox"></router-link>
        <router-link to="signIn" class="rightBox">注册</router-link>
      </div>
    </div>
    <div class="loginContent">
      <div class="loginTitle">欢迎登录</div>
      <div class="formList flex">
        <div class="leftHint">+86</div>
        <input type="text" class="inputBox" v-model="userName" placeholder="请输入用户名或手机号" />
      </div>
      <div v-if="passType=='passWord'" class="formList flex">
        <input
          :type="see?'text':'password'"
          class="inputBox"
          v-model="passWord"
          placeholder="请输入密码"
        />
        <img v-if="!see" src="../assets/img/icon_Nodisplay02x.png" class="seeBtn" @click="see=!see" />
        <img v-else src="../assets/img/icon_display02x.png" alt class="seeBtn" @click="see=!see" />
      </div>
      <div v-if="passType=='authCode'" class="formList flex">
        <input class="inputBox" v-model="authCode" placeholder="请输入验证码" @blur.native="sendMobile" />
        <div v-if="!countDown" class="authBtn" @click="getAuthCode">获取验证码</div>
        <div v-if="countDown" class="second">{{secondDown}}s</div>
      </div>
      <div class="handleBox flex_sb">
        <div v-if="passType=='passWord'" class="goAuthCode" @click="passType='authCode'">验证码登录</div>
        <div v-if="passType=='authCode'" class="goPassWord" @click="passType='passWord'">密码登录</div>
        <router-link to="" class="forget">忘记密码</router-link>
      </div>
      <div class="loginBtn">
        <img
          v-if="(passType=='passWord'&&userName!==''&&passWord!=='')||(passType=='authCode'&&userName!==''&&authCode!=='')"
          src="../assets/img/icon_Signin_click02x.png"
          @click="goInBtn"
        />
        <img v-else src="../assets/img/icon_Signin02x.png" alt />
      </div>
      <router-link to class="moreGoIn">更多登录方式</router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userName: '',
      passWord: '',
      authCode: '',
      secondDown: 5,
      passType: 'passWord', // passWord 或者 authCode 两种登录状态
      see: false,
      countDown: false
    }
  },
  methods: {
    // 验证码倒计时
    getAuthCode() {
      //验证手机号码
      let mobile = this.userName
      //正则校验手机号是否合法
      if (!(/^1(3|4|5|7|8)\d{9}$/.test(mobile))) {
        this.$vux.alert.show({
          content: '手机号格式错误'
        })
        this.userName = ''
        return
      }

      // 发送验证码请求
      // this.$http.get('url').then(res => {
      // })

      // 显示倒计时
      this.countDown = true
      // 设置倒计时
      this.intervalBtn = setInterval(() => {
        if (this.secondDown <= 0) {
          this.countDown = false
          // 清除定时器
          clearInterval(this.intervalBtn)
          // 重置倒计时状态
          this.secondDown = 60;
        };
        // 倒计时
        this.secondDown--;
      }, 1000);
    },
    // 登录
    goInBtn() {
      if (this.passType == 'passWord') {
        // this.$http.get('url', {
        //   params: {
        //     userName: this.userName,
        //     passWord: this.passWord
        //   }
        // }).then(res => {
        //   // 成功相应
        // })
      } else {
        // this.$http.get('url', {
        //   params: {
        //     userName: this.userName,
        //     passWord: this.passWord
        //   }
        // }).then(res => {
        // })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.loginBox {
  .headBox {
    position: relative;
    padding: 20px;
    img {
      position: absolute;
      top: 0;
      right: 0;
      width: 180px;
    }
    .headContent {
      padding-top: 30px;
      font-size: 34px;
      .leftBox {
        color: #04aaff;
        font-size: 40px;
      }
      .rightBox {
        display: inline-block;
        color: #04aaff;
        border-radius: 40px;
        border: 2px solid #04aaff;
        text-align: center;
        line-height: 80px;
        height: 80px;
        width: 140px;
        background-color: #fff;
        z-index: 3;
      }
    }
  }
  .loginContent {
    padding: 40px 80px;
    .loginTitle {
      font-size: 50px;
      font-weight: bold;
      padding: 40px 0;
    }
    .formList {
      // padding: 40px 0;
      height: 120px;
      border-bottom: 2px solid #f0f0f0;
      .leftHint {
        background-color: #f6f6fe;
        color: #798696;
        padding: 2px 10px;
        margin-right: 20px;
        font-size: 32px;
        border-radius: 10px;
      }
      .inputBox {
        border: none;
        outline: none;
        font-size: 32px;
        flex-grow: 1;
        padding: 0 10px;
      }
      .seeBtn {
        width: 50px;
      }
      .authBtn {
        font-size: 30px;
        color: #04aaff;
      }
      .second {
        font-size: 30px;
        color: #04aaff;
      }
    }
    .handleBox {
      padding: 40px 0;
      font-size: 34px;
      color: #798696;
      .forget {
        color: #798696;
      }
    }
    .loginBtn {
      margin-top: 40px;
      text-align: center;
      img {
        width: 120px;
      }
    }
    .moreGoIn {
      position: absolute;
      bottom: 50px;
      left: 0;
      right: 0;
      text-align: center;
      color: #798696;
      font-size: 36px;
    }
  }
}
</style>